<template>
  <Container>
      <Sprite :texture="plane"></Sprite>
  </Container>
</template>

<script>
import plane from "../assets/plane.png"
import {onMounted, onUnmounted, reactive} from "vue";

export default {
    name: "Plane",
    setup(props, {emit}) {
        return {
            plane
        }
    }
};

export function usePlane(){
    const planeInfo = reactive({
        x: 100,
        y: 880,
    });
    function move() {

        // move
        const speed = 30;
        function handleMove(e) {
            console.log(e.code)
            switch (e.code) {
                case "ArrowUp":
                    planeInfo.y -= speed;
                    break;
                case "ArrowDown":
                    planeInfo.y += speed;
                    break;
                case "ArrowLeft":
                    planeInfo.x -= speed;
                    break;
                case "ArrowRight":
                    planeInfo.x += speed;
                    break;
            }
        }

        onMounted(() => {
            window.addEventListener("keyup", handleMove)
        });

        onUnmounted(() => {
            window.removeEventListener("keyup", handleMove);
        });
    }

    move();

    return {
        planeInfo,
    }
}
</script>

<style scoped>

</style>
